<template>
    <div class="zg_ban">
        <div class="bd" v-on:mouseenter="showSwiperBtn" v-on:mouseleave="hideSwiperBtn">

            <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide v-for="item of swiperList" :key="item.id">
                    <a :href="item.link">
                        <img :src="item.image" :alt="item.name"/>
                    </a>
                </swiper-slide>
<!--                小圆点-->
                <div class="swiper-pagination" slot="pagination"></div>
<!--                前进导航按钮-->
                <div class="swiper-button-prev hide" slot="button-prev"></div>
<!--                后退的导航按钮-->
                <div class="swiper-button-next hide" slot="button-next"></div>

            </swiper>

        </div>
    </div>

</template>

<script>
import {Swiper,SwiperSlide,directive} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import {getBannerDataApi} from "../network/banner";

export default {
    name:'BannerSwiper',
    data:function(){
        return {
            swiperOption:{
                loop:true,
                autoplay:true,
                pagination:{
                    el:'.swiper-pagination',
                    clickable:true,
                    bulletActiveClass:'my-bullet-active'
                },
                speed:500,
                navigation:{
                    prevEl:'.swiper-button-prev',
                    nextEl:'.swiper-button-next'
                }
            },
            swiperList:[]
        }

    },
    created() {
        this.getSwiperList()
    },
    computed:{
        swiper(){
            return this.$refs.mySwiper.$swiper
        }
    },
    methods:{
        getSwiperList(){
            getBannerDataApi().then(res=>{
                console.log(res);
                this.swiperList = res
            })
        },
        showSwiperBtn(){
            console.log(this.swiper)
            console.log(this.swiper.navigation.$nextEl)
            this.swiper.navigation.$nextEl.removeClass('hide')
            this.swiper.navigation.$prevEl.removeClass('hide')
        }
        ,hideSwiperBtn(){
            this.swiper.navigation.$nextEl.addClass('hide')
            this.swiper.navigation.$prevEl.addClass('hide')
        }
    },
    components:{
        Swiper,SwiperSlide,directive
    }


}


</script>

<style>
    .swiper-button-prev {
        width: 38px;
        height: 68px;
        overflow: hidden;
        background: #404145;
        line-height: 68px;
        cursor: pointer;
        font-size: 68px;
        color: #fff;
        position: absolute;
        right: 710px;
    }
    .swiper-button-next{
        width: 38px;
        height: 68px;
        overflow: hidden;
        background: #404145;
        line-height: 68px;
        cursor: pointer;
        font-size: 68px;
        color: #fff;
        position: absolute;
        right: 300px;
    }

    .swiper-pagination-bullet{
        width: 10px;
        height: 10px;
        cursor: pointer;
        background: #fff;
        border-radius: 50px;
        opacity: 1;
        cursor: pointer;
        margin: 0 4px;
    }
    .my-bullet-active {
        background: #ff4b04;
    }
    .hide{
        opacity:0;
    }
</style>